<template>
  <div>
    <div class="main-row">
      <div class="main-box">
        <div class="main-nav">
          <div class="main-title">
            <div class="main-t" style="font-weight: bold; font-size: 27px; color: #e59319">
              {{ organIdtitle }}充电桩{{ maintitle }}统计
            </div>
          </div>
          <div class="screen-row" :style="{ width: screenshow ? '' : '740px' }">
            <div class="screen-btn" @click="screenshow = !screenshow">
              <i :class="screenshow ? 'el-icon-search' : 'el-icon-d-arrow-right'"></i>
            </div>
            <div v-show="organListdata != null && organListdata.length > 1" class="main-slect"
              style="padding-right: 10px; display: inline-block">
              <span>网点选择：</span>
              <!--  -->
              <el-select v-model="organId" style="width: 120px" placeholder="请选择" @change="changeOrganid($event)">
                <el-option v-for="(item, index) in organListdata" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div style="display: inline-block; padding-left: 10px">
              <span> 筛选 </span>
              <el-select style="width: 120px" v-model="type" :class="'sorttype' + type" placeholder="请选择"
                @change="sorttypechange($event)">
                <el-option label="用电量" :value="1"></el-option>
                <el-option label="温度" :value="2"></el-option>
                <el-option label="使用时长" :value="3"></el-option>
                <el-option label="功率" :value="4"> </el-option>
              </el-select>
            </div>
            <div style="display: inline-block; padding-left: 10px">
              <span> 排序 </span>
              <el-select style="width: 140px" v-model="currentsotr" :class="'currentsotr' + currentsotr"
                placeholder="请选择" @change="chargedata_sort($event)">
                <el-option label="按序号" value="default"></el-option>
                <el-option label="从小到大" value="desc"></el-option>
                <el-option label="从大到小" value="asc"></el-option>
              </el-select>
            </div>
            <el-button type="primary" class="nav-btn" style="margin-left: 10px"
              @click="screenChargingPointInformationdatafun(1)">历史记录</el-button>
            <!-- :style="{'right':rightsort +'px'}" -->
            <!-- <div class="sort-btn-row" >
              <i class="el-icon-caret-top" :style="currentsotr==''?'color:#409eff':''" @click="chargedata_sort('desc',1)"></i>
              <i class="el-icon-caret-bottom" :style="currentsotr==''?'color:#409eff':''"  @click="chargedata_sort('asc',2)"></i>
            </div> -->
          </div>
        </div>
        <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 6rem">
          <div class="main-center" ref="maincenter">
            <div v-for="item in chargedata" :key="item.probeId" v-show="statetab == item.state || statetab == 3"
              class="charge-box" @click="ChargingDetails(item.probeId, item)"
              :style="item.number > 100 ? 'font-size: 0.167rem' : ''">
              <div @mouseenter="chargemouseenter($event, item.id, item)" @mouseleave="ChargingPointinfoshow = false"
                class="charge-mainbox" :style="item.state == 0 && type != 2 ? '' : { background: colorcacl2(item) }">
                <div class="chargeing-infos">
                  <div class="charge-title">
                    <i><svg t="1646967302059" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="44759" width="20" height="20">
                        <path
                          d="M512 2.27555555C230.48760889 2.27555555 2.27555555 230.48760889 2.27555555 512c0 281.51352889 228.21205333 509.72444445 509.72444445 509.72444445 281.51352889 0 509.72444445-228.21091555 509.72444445-509.72444445 0-281.51239111-228.21091555-509.72444445-509.72444445-509.72444445z m213.38112 468.24675556L468.35029333 795.63889778c-2.67832889 2.38592-5.80152889 3.58286222-9.37187555 3.58286222-1.78176 0-3.1232-0.42211555-4.01635556-1.19808-6.2464-1.61564445-8.47644445-4.77866667-6.69468444-9.56188445l41.50499555-218.73322666H309.04433778c-4.46008889 0-7.58670222-1.59744-9.37301333-4.78208-2.67491555-3.16302222-2.23004445-6.74702222 1.34144-10.75768889l278.44721777-325.11886222c3.57262222-4.78321778 7.58442667-5.55235555 12.04906667-2.39274667 4.46008889 0.79758222 6.69468445 4.00839111 6.69468444 9.56302222l-41.50499555 218.74005334h159.30936889c4.46122667 0 7.58328889 1.61564445 9.37301333 4.77866666 0.88860445 3.18805333 0.88860445 6.77319111 0 10.76337778z"
                          p-id="44760" fill="#ffffff"></path>
                      </svg></i>
                    <span class="charge-value">{{
                        (item.kWh / 1000).toFixed(2) + "度"
                    }}</span>
                  </div>
                </div>
                <div class="charge-icon">
                  <img src="@/assets/images/icon11.png" v-if="item.state == 0 || item.state == 2" />
                  <img src="@/assets/images/icon10.png" v-if="item.state == 1" />
                  <img src="@/assets/images/icon12.png" v-if="item.state > 1 && item.state != 2" />
                  <div>
                    <span class="charge-numer">{{ item.number }}</span>
                    <span class="charge-name" v-if="item.state > 0 && item.state != 2">{{
                        item.userName | usernamehide
                    }}</span>
                  </div>
                </div>
                <!-- <div class="charge-state"> -->
                <!-- <svg t="1646987355971" class="icon" viewBox="0 0 1653 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="99327" width="100" height="60"><path d="M1301.107822 859.46723H220.820296c-43.298097 0-80.10148-36.803383-80.10148-80.101479V246.799154c0-43.298097 36.803383-80.10148 80.10148-80.10148H1298.942918c43.298097 0 80.10148 36.803383 80.101479 80.10148V779.365751c2.164905 43.298097-34.638478 80.10148-77.936575 80.101479zM220.820296 233.809725c-6.494715 0-10.824524 4.32981-10.824524 10.824524V779.365751c0 6.494715 4.32981 10.824524 10.824524 10.824524H1298.942918c6.494715 0 10.824524-4.32981 10.824524-10.824524V246.799154c0-6.494715-4.32981-10.824524-10.824524-10.824524H220.820296zM1489.454545 694.934461c-21.649049 0-38.968288-17.319239-38.968287-38.968288V370.198732c0-21.649049 17.319239-38.968288 38.968287-38.968288s38.968288 17.319239 38.968288 38.968288v285.767441c0 21.649049-17.319239 38.968288-38.968288 38.968288z" p-id="99328" fill="#f4ea2a"></path></svg> -->
                <!-- <div class="stateing"></div> -->
                <!-- <span class="state-text">{{
                    item.state > 0 ? "充电中" : "空闲"
                  }}</span>
                </div> -->
                <div class="charge-infos">
                  <div class="charge-title">
                    <i><svg t="1623289334562" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="46688" width="20" height="20">
                        <path
                          d="M512 0c282.788 0 512 229.212 512 512s-229.212 512-512 512S0 794.788 0 512 229.212 0 512 0z m-20.48 215.04a30.72 30.72 0 0 0-30.72 30.72v286.72a30.72 30.72 0 0 0 9.83 22.528L680.387 750.1a30.72 30.72 0 0 0 41.86-45.015L522.24 519.127V245.76a30.72 30.72 0 0 0-30.72-30.72z"
                          p-id="46689" fill="#ffffff"></path>
                      </svg></i>
                    <span class="charge-value">{{
                        calctime(item.Usagetime)
                    }}</span>
                  </div>
                  <div class="charge-title">
                    <i><svg t="1623286665079" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="20215" width="20" height="20">
                        <path
                          d="M511.10538334 10.90284029c-276.5483767 0-500.76167846 224.21330176-500.76167847 500.76167846 0 138.55375606 56.36084992 264.02374338 147.27626854 354.71550784 90.57993737 90.24445613 215.49078928 146.04617063 353.48540993 146.04617062 138.77741021 0 264.24739754-56.36084992 354.93916199-147.49992271C956.17717438 774.34633713 1011.86706179 649.5473123 1011.86706179 511.77634584c0-276.66020377-224.21330176-500.87350553-500.76167845-500.87350555z m171.76639976 515.7465076c-40.03409579 31.64706454-96.95408112 47.75016452-169.19437685 47.75016452h-85.32406447c-4.47308334 0-8.05154999 3.57846665-8.05154999 8.05154999v205.31452472c0 22.92455206-18.67512289 41.59967494-41.59967494 41.59967494s-41.59967494-18.67512289-41.59967495-41.59967494V233.77421706c0-22.92455206 18.67512289-41.59967494 41.59967495-41.59967494h131.6204769c75.93058948 0 131.84413107 13.41924998 170.98361017 41.04053952 43.83621659 30.86427496 65.97797907 79.84453739 65.97797908 145.48703521 0.11182709 64.30057282-21.58262706 114.06362484-64.4123999 147.94723104z"
                          p-id="20216" fill="#ffffff"></path>
                        <path
                          d="M626.06362484 291.92430031c-25.38474788-16.88588956-65.30701657-24.71378538-125.5818144-24.71378538h-72.01664157c-4.47308334 0-8.05154999 3.57846665-8.05155 8.05154999v216.0499247c0 4.47308334 3.57846665 8.05154999 8.05155 8.05154999h75.37145406c57.03181242 0 97.17773527-9.50530206 122.67431024-28.96321455 24.82561246-18.89877706 36.90293745-48.86843534 36.90293745-91.69820821-0.11182709-42.27063744-11.96549789-69.89192699-37.35024578-86.77781654z"
                          p-id="20217" fill="#ffffff"></path>
                      </svg></i>
                    <span class="charge-value">{{
                        item.activePower + "W"
                    }}</span>
                  </div>

                  <div class="charge-title">
                    <i><svg t="1623286511622" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="19299" width="15" height="15">
                        <path
                          d="M509.269333 10.453333c273.664 0 496.64 222.933333 496.64 496.597334s-222.976 496.597333-496.64 496.597333C235.648 1003.648 12.672 780.714667 12.672 507.050667S235.648 10.453333 509.312 10.453333z m55.04 192c-67.754667 0-101.589333 35.541333-101.589333 106.666667v239.957333h-10.24c-36.48 0-65.450667-13.013333-86.784-38.997333-21.333333-26.026667-32-60.672-32-104.149333 0-76.16 27.690667-141.013333 82.858667-194.432H341.632c-48.682667 49.92-72.96 114.474667-72.96 193.408 0 60.373333 16.64 109.226667 49.834667 146.346666 33.194667 37.12 78.08 55.466667 134.613333 54.741334 1.109333 1.194667 4.309333 1.194667 9.6 0v172.373333h58.368V605.866667c6.570667 1.194667 10.410667 1.194667 11.52 0 55.04 0.896 99.498667-17.237333 133.333333-54.698667 33.834667-37.333333 50.773333-84.906667 50.773334-142.506667 0-60.16-13.482667-109.482667-40.448-148.224-26.88-38.613333-64.213333-57.984-111.957334-57.984z m4.138667 64c26.624 0 47.317333 15.786667 62.08 47.488 14.762667 31.658667 22.186667 69.589333 22.186667 113.664 0 46.72-10.538667 84.864-31.573334 114.474667-21.077333 29.568-49.365333 44.373333-84.821333 44.373333h-11.648V320c0-35.626667 14.592-53.504 43.776-53.504z"
                          p-id="19300" fill="#ffffff"></path>
                      </svg></i>
                    <span class="charge-value">{{
                        item.powerFactor + "%"
                    }}</span>
                  </div>

                  <div class="charge-title">
                    <i><svg t="1623286914586" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="24162" width="20" height="20">
                        <path
                          d="M512 0A511.568842 511.568842 0 0 0 0 512C0 795.109053 228.890947 1024 512 1024S1024 795.109053 1024 512 795.109053 0 512 0z m54.218105 784.545684H457.781895L263.545263 239.454316h97.872842l150.581895 445.709473h3.018105l150.581895-445.709473h97.872842l-197.254737 545.091368z"
                          fill="#ffffff" p-id="24163"></path>
                      </svg></i>
                    <span class="charge-value">{{ item.voltage }}V</span>
                  </div>
                  <div class="charge-title">
                    <i><svg t="1646968112064" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="62849" width="20" height="20">
                        <path
                          d="M512 0c-282.757922 0-511.978511 229.229798-511.978511 512s229.220588 512 511.978511 512 511.978511-229.229798 511.978511-512S794.757922 0 512 0zM661.247162 843.712891c-41.195238 41.195238-95.967702 63.881936-154.225547 63.881936s-113.029286-22.686698-154.224524-63.881936c-41.194214-41.195238-63.881936-95.967702-63.881936-154.225547 0-60.432371 24.772196-117.485785 68.432579-158.644183L357.347734 236.839103c0-33.248242 17.084097-65.252143 46.873564-87.803765 27.79402-21.041222 64.302515-32.630165 102.800317-32.630165 38.496779 0 75.004251 11.588943 102.799294 32.630165 29.78742 22.551622 46.873564 54.555523 46.873564 87.803765l0 294.003034c43.661406 41.158399 68.434625 98.212836 68.434625 158.645207C725.129098 747.745189 702.4424 802.517653 661.247162 843.712891zM720.633714 489.822908l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 483.352543 728.614479 489.822908 720.633714 489.822908zM720.633714 445.468724l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 438.998359 728.614479 445.468724 720.633714 445.468724zM720.633714 401.113517l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107s6.470365-14.450107 14.449084-14.450107l35.183314 0c7.980765 0 14.450107 6.468318 14.450107 14.450107C735.083821 394.644175 728.614479 401.113517 720.633714 401.113517zM720.633714 356.757287l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 350.287945 728.614479 356.757287 720.633714 356.757287zM720.633714 312.403103l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 305.933761 728.614479 312.403103 720.633714 312.403103zM720.633714 268.047896l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 261.57753 728.614479 268.047896 720.633714 268.047896z"
                          p-id="62850" fill="#ffffff"></path>
                        <path
                          d="M608.66969 566.616922l-10.616802-8.79327L598.052888 236.839103c0-33.495882-41.687448-61.793368-91.031273-61.793368-49.345871 0-91.033319 28.29851-91.033319 61.793368l0 320.985572-10.615779 8.794293c-36.743856 30.436196-57.8168 75.221192-57.8168 122.869399 0 87.929632 71.536266 159.465898 159.465898 159.465898 87.930655 0 159.465898-71.536266 159.466921-159.466921C666.488537 641.839137 645.414569 597.056188 608.66969 566.616922zM507.022639 800.76166c-61.454654 0-111.273293-49.818639-111.273293-111.273293 0-45.445028 27.245528-84.519975 66.289776-101.797477L462.039121 317.557496c0-18.808368 20.139689-34.053584 44.982494-34.053584 24.841781 0 44.981471 15.245216 44.981471 34.053584l0 270.13237c39.045271 17.278525 66.291822 56.352449 66.291822 101.798501C618.294908 750.943021 568.477292 800.76166 507.022639 800.76166z"
                          p-id="62851" fill="#ffffff"></path>
                      </svg></i>
                    <span class="charge-value">{{
                        item.temperature + "℃"
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="statistics-row">
        <div class="ranking-row">
          <div class="ranktitle">
            <div class="ranktitle-type-row" :style="datetypeshow ? 'top:-2.16rem' : ''"
              :class="datetypeshow ? '' : 'bentdong'">
              <div class="ranktitle-box" v-show="datetypeshow">
                <el-button :type="listtype == 1 ? 'primary' : ''" class="ranktitle-type-btn"
                  @click="changerBatteryListfun(1, $event)">实时</el-button>
                <el-button :type="listtype == 5 ? 'primary' : ''" class="ranktitle-type-btn"
                  @click="changerBatteryListfun(5, $event)">本日</el-button>
                <el-button :type="listtype == 2 ? 'primary' : ''" class="ranktitle-type-btn"
                  @click="changerBatteryListfun(2, $event)">本周</el-button>
                <el-button :type="listtype == 3 ? 'primary' : ''" @click="changerBatteryListfun(3, $event)"
                  class="ranktitle-type-btn">本月</el-button>
                <el-button :type="listtype == 4 ? 'primary' : ''" @click="changerBatteryListfun(4, $event)"
                  class="ranktitle-type-btn">本年</el-button>
              </div>
              <div @click="datetypeshow = !datetypeshow" :style="datetypeshow ? 'border-radius:0' : ''"
                class="ranktitle-btn" title="日期范围选择" :class="
                  datetypeshow ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
                "></div>
            </div>
            <div @click="datetypeshow = !datetypeshow" class="ranktitle-day"
              :class="listtype != 5 ? 'noranktitleday' : ''">
              <font v-if="listtype != 5" :style="listtype == 2 ? 'font-size:0.21rem' : ''" style="text-align: center">{{
                  getranktitle()
              }}</font>

              <font v-if="listtype == 5" style="text-align: left">{{
                  getFormatDate().slice(8, 10)
              }}</font>
              <font v-if="listtype == 5" style="text-align: right">{{
                  getFormatDate().slice(5, 7)
              }}</font>
              <div class="bl-corner2"></div>
              <div class="br-corner2"></div>
            </div>
            <div class="ranktitle-text">
              排名前<font style="white-space: nowrap">10%</font>
              <div class="tl-corner2"></div>
              <div class="tr-corner2"></div>
              <div class="bl-corner2"></div>
              <div class="br-corner2"></div>
            </div>
          </div>
          <div class="ranking-box">
            <div class="ranking-title"><span>用电量(度)</span></div>

            <!-- <ul class="ranking-list">
              <li
                v-for="(item, index) in electricityconsumptiondata"
                :key="item.id"
              >
                <div class="ranking-name" :style="{background:colorcacl(item,1)}">
                  {{ item.number }}
                </div>
                <div class="ranking-value">{{ (item.kWh / 1000).toFixed(2) }}</div>
              </li>
            </ul> -->
            <el-table :data="historyelectricityconsumptiondata" class="ranktable"
              :header-cell-class-name="headerRowStyle" height="1.4rem" style="width: 2.5rem">
              <el-table-column prop="number" label="herad" align="center" width="50">
                <template slot="header">
                  <span class="table-header">序号</span>
                </template>
                <template slot-scope="scope">
                  <!-- :style="{ background: colorcacl(scope.row, 1) }" -->
                  <div class="ranking-name" style="background: #049c04">
                    {{ scope.row.number }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="kWh" label="herad" width="55" align="center">
                <template slot="header">
                  <span class="table-header">累计</span>
                </template>
                <template slot-scope="scope">
                  <span>{{ formatNumber(scope.row.kWh / 1000) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="kWh" label="herad" width="65" align="center">
                <template slot="header">
                  <span class="table-header">最高温</span>
                </template>
                <template slot-scope="scope">
                  <!-- :style="scope.row.temperature >= 65 ? 'color:#ffa5a5' : ''" -->
                  <span>{{ scope.row.temperature }}℃</span>
                </template>
              </el-table-column>
              <el-table-column prop="kWh" label="herad" width="80" align="center">
                <template slot="header">
                  <span class="table-header">最高功率</span>
                </template>
                <template slot-scope="scope">
                  <!-- :style="scope.row.activePower >= 500 ? 'color:#ffa5a5' : ''" -->
                  <span>{{ scope.row.activePower }}W</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="tl-corner2"></div>
            <div class="tr-corner2"></div>
            <div class="bl-corner2"></div>
            <div class="br-corner2"></div>
          </div>
          <div class="ranking-box">
            <div class="ranking-title">温度(℃)</div>
            <el-table :data="historytemperatureRankdata" class="ranktable" :header-cell-class-name="headerRowStyle"
              height="1.4rem" style="width: 2.2rem">
              <el-table-column prop="number" label="herad" align="center" width="55">
                <template slot="header">
                  <span class="table-header">序号</span>
                </template>
                <template slot-scope="scope">
                  <!-- :style="{ background: colorcacl(scope.row, 2) }" -->
                  <div class="ranking-name" style="background: #be0000">
                    {{ scope.row.number }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="temperature" label="herad" width="55">
                <template slot="header">
                  <span class="table-header">最高</span>
                </template>
                <template slot-scope="scope">
                  <!-- :style="scope.row.temperature >= 65 ? 'color:#ffa5a5' : ''" -->
                  <span>{{ scope.row.temperature ? scope.row.temperature : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="minSt" label="herad" width="55">
                <template slot="header">
                  <span class="table-header">最低</span>
                </template>
                <template slot-scope="scope">
                  <span>{{ scope.row.minSt ? scope.row.minSt : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="avgSt" label="herad" width="55">
                <template slot="header">
                  <span class="table-header">平均</span>
                </template>
                <template slot-scope="scope">
                  <span>{{ scope.row.avgSt ? scope.row.avgSt : '-' }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="tl-corner2"></div>
            <div class="tr-corner2"></div>
            <div class="bl-corner2"></div>
            <div class="br-corner2"></div>
          </div>
          <div class="ranking-box">
            <div class="ranking-title">使用时长</div>
            <el-table :data="historytimeRankdata" class="ranktable" :header-cell-class-name="headerRowStyle"
              height="1.4rem" style="width: 2.15rem">
              <el-table-column prop="number" label="herad" align="center" width="55">
                <template slot="header">
                  <span class="table-header">序号</span>
                </template>
                <template slot-scope="scope">
                  <!-- :style="{ background: colorcacl(scope.row, 3) }" -->
                  <div class="ranking-name" style="background: #a57200">
                    {{ scope.row.number }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="temperature" label="herad" width="80">
                <template slot="header">
                  <span class="table-header">总计</span>
                </template>
                <template slot-scope="scope">
                  <span>{{ calctime(scope.row.Usagetime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="temperature" label="herad" width="80">
                <template slot="header">
                  <span class="table-header">次均</span>
                </template>
                <template slot-scope="scope">
                  <span>{{ calctime(scope.row.avgtime) }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="tl-corner2"></div>
            <div class="tr-corner2"></div>
            <div class="bl-corner2"></div>
            <div class="br-corner2"></div>
          </div>
          <div class="ranking-box">
            <div class="ranking-title">功率(W)</div>
            <el-table :data="historypowerrankdata" class="ranktable" :header-cell-class-name="headerRowStyle"
              height="1.4rem" style="width: 1.9rem">
              <el-table-column prop="number" label="herad" align="center" width="55">
                <template slot="header">
                  <span class="table-header">序号</span>
                </template>
                <template slot-scope="scope">
                  <!-- :style="{ background: colorcacl(scope.row, 4) }" -->
                  <div class="ranking-name" style="background: #67009a">
                    {{ scope.row.number }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="maxSp" label="herad" width="80">
                <template slot="header">
                  <span class="table-header">最高</span>
                </template>
                <template slot-scope="scope">
                  <!-- :style="scope.row.activePower >= 500 ? 'color:#ffa5a5' : ''" -->
                  <span>{{ scope.row.activePower }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="avgSp" label="herad" width="55">
                <template slot="header">
                  <span class="table-header">平均</span>
                </template>
                <template slot-scope="scope">
                  <span>{{ scope.row.avgSp ? scope.row.avgSp : '-' }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="tl-corner2"></div>
            <div class="tr-corner2"></div>
            <div class="bl-corner2"></div>
            <div class="br-corner2"></div>
          </div>
        </div>

        <div class="Totalinformation-row">
          <div class="Totalinformation-title" style="color: rgb(229, 147, 25)">
            充电桩使用统计
            <div class="tl-corner2"></div>
            <div class="tr-corner2"></div>
            <div class="bl-corner2"></div>
            <div class="br-corner2"></div>
          </div>
          <div class="Totalinformation-mian">
            <div class="Totalinformation-box" style="width: calc(55% - 0.53rem)">
              <div class="Totalinformation-icon">
                <img src="@/assets/images/icon_3.png" />
                <span>用电量(度)</span>
              </div>
              <div class="Totalinformation-infos">
                <div class="now">
                  当天
                  <span styl>
                    {{ formatNumber((parseInt(statisticsdata.electricityconsumption) + parseInt(todaykwh)) / 1000) }}
                  </span>
                  <!-- <span v-html="numbac(87)">
                </span> -->

                </div>
                <div class="all">
                  <div class="Totalinformation-infos-row">
                    <div class="Totalinformation-infos-box" style="width: 0.76rem">
                      <div>周</div>
                      <p>{{ formatNumber(statisticsdata.weekelectricityconsumption / 1000) }}</p>
                    </div>
                    <span></span>
                    <div class="Totalinformation-infos-box" style="width: 0.65rem">
                      <div>月</div>
                      <p>{{ formatNumber(statisticsdata.monthelectricityconsumption / 1000) }}</p>
                    </div>
                    <span></span>
                    <div class="Totalinformation-infos-box" style="width: 0.7rem">
                      <div>年</div>
                      <p>{{ formatNumber(statisticsdata.yearelectricityconsumption / 1000) }}</p>
                    </div>
                  </div>
                </div>
                <div class="tl-corner2"></div>
                <div class="tr-corner2"></div>
                <div class="bl-corner2"></div>
                <div class="br-corner2"></div>
              </div>
            </div>

            <div class="Totalinformation-box" style="width: calc(45% - 0.53rem)">
              <div class="Totalinformation-icon">
                <img src="@/assets/images/icon_2.png" />
                <span>使用次数</span>
              </div>
              <div class="Totalinformation-infos">
                <div class="now">
                  当天
                  <span>{{ statisticsdata.usagecount + todaynow }}</span>
                  <!-- <span v-html="numbac(statisticsdata.usagecount + todaynow)"></span> -->
                  <!-- <span v-html="numbac(51)"></span> -->
                </div>
                <div class="all">
                  <div class="Totalinformation-infos-row">
                    <div class="Totalinformation-infos-box">
                      <div>周</div>
                      <p>{{ statisticsdata.weekusagecount }}</p>
                    </div>
                    <span></span>
                    <div class="Totalinformation-infos-box">
                      <div>月</div>
                      <p>{{ statisticsdata.monthusagecount }}</p>
                    </div>
                    <span></span>
                    <div class="Totalinformation-infos-box">
                      <div>年</div>
                      <p>{{ statisticsdata.yearusagecount }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tl-corner2"></div>
              <div class="tr-corner2"></div>
              <div class="bl-corner2"></div>
              <div class="br-corner2"></div>
            </div>
            <div class="Totalinformation-box" style="width: calc(55% - 0.53rem)">
              <div class="Totalinformation-icon">
                <img src="@/assets/images/icon_4.png" />
                <span>使用时长(h)</span>
              </div>
              <div class="Totalinformation-infos">
                <!-- v-html="numbac((statisticsdata.usagecount + todaynow)/ 3600)" -->

                <div class="now">
                  当天
                  <!-- <span
              v-html="numbac(467)"
                
                ></span> -->
                  <span>{{ parseInt((statisticsdata.Usagetimes + todaytime) / 3600) }}</span>
                </div>
                <div class="all">
                  <div class="Totalinformation-infos-row">
                    <div class="Totalinformation-infos-box" style="width: 0.76rem">
                      <div>周</div>
                      <p>{{ parseInt((statisticsdata.weekUsagetimes) / 3600) }}</p>
                    </div>
                    <span></span>
                    <div class="Totalinformation-infos-box" style="width: 0.65rem">
                      <div>月</div>
                      <p>{{ parseInt((statisticsdata.monthUsagetimes) / 3600) }}</p>
                    </div>
                    <span></span>
                    <div class="Totalinformation-infos-box" style="width: 0.7rem">
                      <div>年</div>
                      <p>{{ parseInt((statisticsdata.yearUsagetimes) / 3600) }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tl-corner2"></div>
              <div class="tr-corner2"></div>
              <div class="bl-corner2"></div>
              <div class="br-corner2"></div>
            </div>
            <div class="Totalinformation-box" style="width: calc(45% - 0.53rem)">
              <div class="Totalinformation-icon">
                <img src="@/assets/images/icon9.png" />
                <span>使用人数</span>
              </div>
              <div class="Totalinformation-infos">
                <div class="now">
                  当天
                  <!-- <span v-html="numbac(21)"></span> -->
                  <span>{{ statisticsdata.usersNumber + todaynow }}</span>
                </div>
                <div class="all">
                  <div class="Totalinformation-infos-row">
                    <div class="Totalinformation-infos-box">
                      <div>周</div>
                      <p>{{ statisticsdata.weekusersNumber }}</p>
                    </div>
                    <span></span>
                    <div class="Totalinformation-infos-box">
                      <div>月</div>
                      <p>{{ statisticsdata.monthusersNumber }}</p>
                    </div>
                    <span></span>
                    <div class="Totalinformation-infos-box">
                      <div>年</div>
                      <p>{{ statisticsdata.yearusersNumber }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tl-corner2"></div>
              <div class="tr-corner2"></div>
              <div class="bl-corner2"></div>
              <div class="br-corner2"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="fictitious-zk-btn el-icon-caret-left" title="显示统计充电桩" v-show="!fictitiousshow"
        @click="fictitiousshow = true"></div>
      <div class="charge-box fictitious-charge-box" v-if="fictitiousshow">
        <div class="el-icon-caret-right fictitious-btn" title="隐藏统计充电桩" @click="fictitiousshow = false"></div>
        <div class="charge-mainbox" style="align-items: flex-start">
          <div class="charge-icon" style="padding-top: 0.11rem">
            <span style="
                text-align: center;
                font-size: 0.25rem;
                font-weight: bold;
                margin-bottom: 0.1rem;
              ">实时</span>
            <img src="@/assets/images/icon8.png" />
            <span class="charge-numer">
              <font style="color: #fbff00">{{
                  statisticsdata.chargeinuse
              }}</font>/{{ statisticsdata.allcharge }}
            </span>
          </div>

          <div class="charge-infos">
            <div class="charge-title" style="padding-left: 32px">合计</div>
            <div class="charge-title">
              <i>
                <svg t="1646967302059" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="44759" width="20" height="20">
                  <path
                    d="M512 2.27555555C230.48760889 2.27555555 2.27555555 230.48760889 2.27555555 512c0 281.51352889 228.21205333 509.72444445 509.72444445 509.72444445 281.51352889 0 509.72444445-228.21091555 509.72444445-509.72444445 0-281.51239111-228.21091555-509.72444445-509.72444445-509.72444445z m213.38112 468.24675556L468.35029333 795.63889778c-2.67832889 2.38592-5.80152889 3.58286222-9.37187555 3.58286222-1.78176 0-3.1232-0.42211555-4.01635556-1.19808-6.2464-1.61564445-8.47644445-4.77866667-6.69468444-9.56188445l41.50499555-218.73322666H309.04433778c-4.46008889 0-7.58670222-1.59744-9.37301333-4.78208-2.67491555-3.16302222-2.23004445-6.74702222 1.34144-10.75768889l278.44721777-325.11886222c3.57262222-4.78321778 7.58442667-5.55235555 12.04906667-2.39274667 4.46008889 0.79758222 6.69468445 4.00839111 6.69468444 9.56302222l-41.50499555 218.74005334h159.30936889c4.46122667 0 7.58328889 1.61564445 9.37301333 4.77866666 0.88860445 3.18805333 0.88860445 6.77319111 0 10.76337778z"
                    p-id="44760" fill="#ffffff"></path>
                </svg>
              </i>
              <span class="charge-value">
                <font style="font-weight: bold;margin-right: 5px;">(度)</font>{{ (todaykwh / 1000).toFixed(2) }}
              </span>
            </div>
            <div class="charge-title">
              <i><svg t="1623286665079" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="20215" width="20" height="20">
                  <path
                    d="M511.10538334 10.90284029c-276.5483767 0-500.76167846 224.21330176-500.76167847 500.76167846 0 138.55375606 56.36084992 264.02374338 147.27626854 354.71550784 90.57993737 90.24445613 215.49078928 146.04617063 353.48540993 146.04617062 138.77741021 0 264.24739754-56.36084992 354.93916199-147.49992271C956.17717438 774.34633713 1011.86706179 649.5473123 1011.86706179 511.77634584c0-276.66020377-224.21330176-500.87350553-500.76167845-500.87350555z m171.76639976 515.7465076c-40.03409579 31.64706454-96.95408112 47.75016452-169.19437685 47.75016452h-85.32406447c-4.47308334 0-8.05154999 3.57846665-8.05154999 8.05154999v205.31452472c0 22.92455206-18.67512289 41.59967494-41.59967494 41.59967494s-41.59967494-18.67512289-41.59967495-41.59967494V233.77421706c0-22.92455206 18.67512289-41.59967494 41.59967495-41.59967494h131.6204769c75.93058948 0 131.84413107 13.41924998 170.98361017 41.04053952 43.83621659 30.86427496 65.97797907 79.84453739 65.97797908 145.48703521 0.11182709 64.30057282-21.58262706 114.06362484-64.4123999 147.94723104z"
                    p-id="20216" fill="#ffffff"></path>
                  <path
                    d="M626.06362484 291.92430031c-25.38474788-16.88588956-65.30701657-24.71378538-125.5818144-24.71378538h-72.01664157c-4.47308334 0-8.05154999 3.57846665-8.05155 8.05154999v216.0499247c0 4.47308334 3.57846665 8.05154999 8.05155 8.05154999h75.37145406c57.03181242 0 97.17773527-9.50530206 122.67431024-28.96321455 24.82561246-18.89877706 36.90293745-48.86843534 36.90293745-91.69820821-0.11182709-42.27063744-11.96549789-69.89192699-37.35024578-86.77781654z"
                    p-id="20217" fill="#ffffff"></path>
                </svg></i>
              <span class="charge-value">
                <font style="font-weight: bold;margin-right: 5px;">(W)</font>{{ fictitious.totalactivePower }}
              </span>
            </div>
            <div class="charge-title">
              <i><svg t="1646968112064" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="62849" width="20" height="20">
                  <path
                    d="M512 0c-282.757922 0-511.978511 229.229798-511.978511 512s229.220588 512 511.978511 512 511.978511-229.229798 511.978511-512S794.757922 0 512 0zM661.247162 843.712891c-41.195238 41.195238-95.967702 63.881936-154.225547 63.881936s-113.029286-22.686698-154.224524-63.881936c-41.194214-41.195238-63.881936-95.967702-63.881936-154.225547 0-60.432371 24.772196-117.485785 68.432579-158.644183L357.347734 236.839103c0-33.248242 17.084097-65.252143 46.873564-87.803765 27.79402-21.041222 64.302515-32.630165 102.800317-32.630165 38.496779 0 75.004251 11.588943 102.799294 32.630165 29.78742 22.551622 46.873564 54.555523 46.873564 87.803765l0 294.003034c43.661406 41.158399 68.434625 98.212836 68.434625 158.645207C725.129098 747.745189 702.4424 802.517653 661.247162 843.712891zM720.633714 489.822908l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 483.352543 728.614479 489.822908 720.633714 489.822908zM720.633714 445.468724l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 438.998359 728.614479 445.468724 720.633714 445.468724zM720.633714 401.113517l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107s6.470365-14.450107 14.449084-14.450107l35.183314 0c7.980765 0 14.450107 6.468318 14.450107 14.450107C735.083821 394.644175 728.614479 401.113517 720.633714 401.113517zM720.633714 356.757287l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 350.287945 728.614479 356.757287 720.633714 356.757287zM720.633714 312.403103l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 305.933761 728.614479 312.403103 720.633714 312.403103zM720.633714 268.047896l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 261.57753 728.614479 268.047896 720.633714 268.047896z"
                    p-id="62850" fill="#ffffff"></path>
                  <path
                    d="M608.66969 566.616922l-10.616802-8.79327L598.052888 236.839103c0-33.495882-41.687448-61.793368-91.031273-61.793368-49.345871 0-91.033319 28.29851-91.033319 61.793368l0 320.985572-10.615779 8.794293c-36.743856 30.436196-57.8168 75.221192-57.8168 122.869399 0 87.929632 71.536266 159.465898 159.465898 159.465898 87.930655 0 159.465898-71.536266 159.466921-159.466921C666.488537 641.839137 645.414569 597.056188 608.66969 566.616922zM507.022639 800.76166c-61.454654 0-111.273293-49.818639-111.273293-111.273293 0-45.445028 27.245528-84.519975 66.289776-101.797477L462.039121 317.557496c0-18.808368 20.139689-34.053584 44.982494-34.053584 24.841781 0 44.981471 15.245216 44.981471 34.053584l0 270.13237c39.045271 17.278525 66.291822 56.352449 66.291822 101.798501C618.294908 750.943021 568.477292 800.76166 507.022639 800.76166z"
                    p-id="62851" fill="#ffffff"></path>
                </svg></i>
              <span class="charge-value">
                <font style="font-weight: bold;margin-right: 5px;">(℃)</font>---
              </span>
            </div>
            <!-- <div class="charge-title" style="">
              <i
                ><svg
                  t="1623289334562"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="46688"
                  width="20"
                  height="20"
                >
                  <path
                    d="M512 0c282.788 0 512 229.212 512 512s-229.212 512-512 512S0 794.788 0 512 229.212 0 512 0z m-20.48 215.04a30.72 30.72 0 0 0-30.72 30.72v286.72a30.72 30.72 0 0 0 9.83 22.528L680.387 750.1a30.72 30.72 0 0 0 41.86-45.015L522.24 519.127V245.76a30.72 30.72 0 0 0-30.72-30.72z"
                    p-id="46689"
                    fill="#ffffff"
                  ></path></svg
              ></i>
              <span class="charge-value">{{calctime(todaytime)}}</span>
            </div> -->
          </div>
          <div class="charge-infos">
            <div class="charge-title">最大</div>
            <div class="charge-title">
              <span class="charge-value">{{ (fictitious.maxkwh / 1000).toFixed(2) }}</span>
            </div>
            <div class="charge-title">
              <span class="charge-value">{{ fictitious.maxactivePower }}</span>
            </div>
            <div class="charge-title">
              <span class="charge-value">{{ fictitious.maxtemperature }}</span>
            </div>
            <!-- <div class="charge-title" style="">
              <span class="charge-value">{{calctime(fictitious.maxtime)}}</span>
            </div> -->
          </div>
          <div class="charge-infos">
            <div class="charge-title">最小</div>
            <div class="charge-title">
              <span class="charge-value">{{ (fictitious.minkwh / 1000).toFixed(2) }}</span>
            </div>
            <div class="charge-title">
              <span class="charge-value">{{ fictitious.minactivePower }}</span>
            </div>
            <div class="charge-title">
              <span class="charge-value">{{ fictitious.mintemperature }}</span>
            </div>
            <!-- <div class="charge-title" style="">
              <span class="charge-value">{{calctime(fictitious.mintime)}}</span>
            </div> -->
          </div>
          <div class="charge-infos">
            <div class="charge-title">平均</div>
            <div class="charge-title">
              <span class="charge-value">{{ (fictitious.avgkwh / 1000).toFixed(2) }}</span>
            </div>
            <div class="charge-title">
              <span class="charge-value">{{ fictitious.avgactivePower }}</span>
            </div>
            <div class="charge-title">
              <span class="charge-value">{{ fictitious.avgtemperature }}</span>
            </div>
            <!-- <div class="charge-title" style="">
              <span class="charge-value">{{calctime(fictitious.avgtime)}}</span>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="state-statistics-row">
      <div>
        充电中:<font @click="statetab = 1" style="cursor: pointer; color: #fbff00; text-decoration: underline">{{
            statisticsdata.chargeinuse
        }}</font>
      </div>
      <div>
        充电完成:<font @click="statetab = 2" style="cursor: pointer; color: #fbff00; text-decoration: underline">0</font>
      </div>
      <div>
        空闲:<font @click="statetab = 0" style="cursor: pointer; color: #fbff00; text-decoration: underline">{{
            statisticsdata.allcharge - statisticsdata.chargeinuse
        }}</font>
      </div>
      <div>
        总数:<font @click="statetab = 3" style="cursor: pointer; color: #fbff00; text-decoration: underline">{{
            statisticsdata.allcharge
        }}</font>
      </div>
      <div>总功率:<font style="color: #fbff00">{{ fictitious.totalactivePower }}W</font>
      </div>
      <div>总用电量:<font style="color: #fbff00">{{ (todaykwh / 1000).toFixed(2) }}度</font>
      </div>
    </div>
    <!-- 年月日弹窗 -->
    <div class="ChargingPointInformation-row" v-if="ChargingPointInformationshow">
      <div class="ChargingPointInformation-box">
        <div class="ChargingPointInformation-nav">
          <div class="ChargingPointInformation-title">本周充电桩使用记录</div>
          <div>
            <el-button :type="Chargingpointtype == 1 ? 'primary' : ''" class="nav-btn"
              @click="screenChargingPointInformationdatafun(1)">本周</el-button>
            <el-button :type="Chargingpointtype == 2 ? 'primary' : ''" class="nav-btn"
              @click="screenChargingPointInformationdatafun(2)">本月</el-button>
            <el-button :type="Chargingpointtype == 3 ? 'primary' : ''" class="nav-btn"
              @click="screenChargingPointInformationdatafun(3)">本年</el-button>
            <!-- <el-button type="primary" class="nav-btn">Excel导出</el-button> -->
            <el-button type="text" @click="ChargingPointInformationshow = false"
              class="el-icon-close close-btn"></el-button>
          </div>
        </div>
        <div class="ChargingPointInformation-main">
          <el-table :data="ChargingPointInformationdata" max-height="300px" border style="width: 100%">
            <el-table-column align="center" prop="probeId">
              <template slot="header">
                <div class="table-header">充电桩</div>
              </template>
              <template slot-scope="scope">
                <div class="table-data">
                  {{ scope.row.number + "号" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="chargeTimes">
              <template slot="header">
                <span class="table-header">服务次数</span>
              </template>
              <template slot-scope="scope">
                <div class="table-data">{{ scope.row.chargeTimes }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="Usagetime">
              <template slot="header">
                <span class="table-header">服务时长</span>
              </template>
              <template slot-scope="scope">
                <div class="table-data">
                  {{ calctime(scope.row.Usagetime) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="kWh">
              <template slot="header">
                <span class="table-header">累计充电量</span>
              </template>
              <template slot-scope="scope">
                <div class="table-data">
                  {{ scope.row.kWh / 1000 }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="tl-corner"></div>
      <div class="tr-corner"></div>
      <div class="bl-corner"></div>
      <div class="br-corner"></div>
    </div>
    <!-- 上移显示 -->
    <div class="ChargingPoint-info" v-if="ChargingPointinfoshow"
      :style="{ top: ChargingPointlocationy, left: ChargingPointlocationx }">
      <!--  -->
      <!---->
      <!-- <div>
        <span>区域</span><font>：{{ ChargingPointinfodata.region }}</font>
      </div> -->
      <div class="ChargingPoint-info-box">
        <div>
          <span>编号</span>
          <font>：{{ ChargingPointinfodata.number }}</font>
        </div>
        <div>
          <span>当前状态</span>
          <font>：<font style="padding: 0 10px; line-height: 1"
              :class="ChargingPointinfodata.state > 0 && ChargingPointinfodata.state != 2 ? 'changstae' : ''">{{
                  ChargingPointinfodata.state > 0 && ChargingPointinfodata.state != 2 ? "开启" : "关闭"
              }}</font>
          </font>
        </div>
        <div v-show="ChargingPointinfodata.state > 0 && ChargingPointinfodata.state != 2">
          <span>使用人</span>
          <font style="width: 120px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">：
              {{ ChargingPointinfodata.userName | usernamehide}}
          </font>
        </div>
        <div>
          <span :style="type == 2 ? { color: '#fbff00' } : ''">温度</span>
          <font>：{{ ChargingPointinfodata.temperature }}℃</font>
        </div>
        <div>
          <span :style="type == 4 ? { color: '#fbff00' } : ''">功率</span>
          <font>：{{ ChargingPointinfodata.activePower }}W</font>
        </div>
        <div v-show="ChargingPointinfodata.state > 0 && ChargingPointinfodata.state != 2">
          <span :style="type == 1 ? { color: '#fbff00' } : ''">用电量</span>
          <font>：{{ (ChargingPointinfodata.kWh / 1000).toFixed(2) }}度</font>
        </div>
        <div v-show="ChargingPointinfodata.state > 0 && ChargingPointinfodata.state != 2">
          <span :style="type == 3 ? { color: '#fbff00' } : ''">使用时长</span>
          <font>：{{ calctime(ChargingPointinfodata.Usagetime) }}</font>
        </div>
      </div>
      <div class="ChargingPoint-info-box">
        <div>阈值信息</div>
        <div>
          <span>过压</span>
          <font>：{{ ChargingPointinfodata.ovAlarmValue }}V</font>
        </div>
        <div>
          <span>欠压</span>
          <font>：{{ ChargingPointinfodata.uvAlarmValue }}V</font>
        </div>
        <div>
          <span>过载</span>
          <font>：{{ ChargingPointinfodata.olAlarmValue }}W</font>
        </div>
        <div>
          <span>超温</span>
          <font>：{{ ChargingPointinfodata.temAlarmValue }}℃</font>
        </div>
      </div>
    </div>


    <!--详细信息弹窗-->
    <div class="Charging-Details-fox" v-if="ChargingDetailsrowshow">
      <div class="Charging-Details-row">
        <div class="Charging-Details-box">
          <div class="Charging-Details-nav">
            <div class="Charging-Details-title">
              <!-- <i  v-if="ChargingDetailsworkstatedata.state > 0"  title="关闭充电桩">
                <svg t="1647398395349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25915" width="27" height="27"><path d="M512 1024C229.6832 1024 0 810.9056 0 548.9664 0 347.8528 137.3184 167.7312 341.8112 100.864c16.7936-5.5296 34.9184 3.2768 40.5504 19.456 5.632 16.2816-3.3792 33.8944-20.0704 39.3216-178.4832 58.368-298.2912 214.8352-298.2912 389.3248 0 227.7376 201.0112 412.9792 448 412.9792s448-185.2416 448-412.9792c0-174.592-119.808-330.9568-298.1888-389.3248-16.7936-5.4272-25.7024-23.04-20.0704-39.3216 5.632-16.2816 23.7568-24.9856 40.5504-19.456C886.6816 167.7312 1024 347.8528 1024 548.9664 1024 810.9056 794.3168 1024 512 1024z" p-id="25916" fill="#ffffff"></path><path d="M512 558.592c-17.7152 0-32.0512-13.9264-32.0512-31.0272V31.0272C480.0512 13.9264 494.2848 0 512 0s32.0512 13.9264 32.0512 31.0272v496.4352c0 17.2032-14.336 31.1296-32.0512 31.1296z" p-id="25917" fill="#ffffff"></path></svg>
              </i> -->
              <span style="color: #e59319; font-weight: bold">
                {{
                    chargingDetailstype == 2
                      ? ChargingDetailsworkstatedata.userName +
                      "使用记录"
                      : poptitle + "号充电桩记录"
                }}
              </span>
            </div>
            <div>
              <div style="display: inline-block" v-show="chargingDetailstype != 1">
                <el-radio style="margin-left: 0.3rem" v-model="usertype" class="nav-radio" :label="1">默认</el-radio>
                <el-radio v-model="usertype" class="nav-radio" :label="2">日</el-radio>
                <el-radio v-model="usertype" class="nav-radio" :label="3">周</el-radio>
                <el-radio v-model="usertype" class="nav-radio" :label="4">月</el-radio>
                <el-radio v-model="usertype" class="nav-radio" :label="5">年</el-radio>
                <el-radio v-model="usertype" class="nav-radio" :label="6">总计</el-radio>
              </div>
              <el-button type="text" @click="ChargingDetailsrowshow = false"
                class="el-icon-close close-btn"></el-button>
            </div>
          </div>
          <div class="Charging-Details-tab-row">
            <div class="Charging-Details-btn" @click="chargingDetailstype_change(1)"
              :class="chargingDetailstype == 1 ? 'Charging-Details-on' : ''">
              <i><img src="@/assets/images/icon-6.png" /></i><span>充电信息</span>
            </div>

            <div v-if="ChargingDetailsworkstatedata.state > 0" class="Charging-Details-btn"
              @click="chargingDetailstype_change(2)" :class="chargingDetailstype == 2 ? 'Charging-Details-on' : ''">
              <i><img src="@/assets/images/icon-5.png" /></i><span>使用者历史</span>
            </div>
            <div class="Charging-Details-btn" @click="chargingDetailstype_change(3)"
              :class="chargingDetailstype == 3 ? 'Charging-Details-on' : ''">
              <i><img src="@/assets/images/icon-7.png" /></i><span>充电桩历史</span>
            </div>
            <div class="Charging-Details-btn" v-if="ChargingDetailsworkstatedata.state == 0"
              @click="closeCharg('open')">
              开启充电桩
            </div>
            <div class="Charging-Details-btn" v-if="ChargingDetailsworkstatedata.state > 0"
              @click="closeCharg('close')">
              关闭充电桩
            </div>
          </div>
          <!--充电信息-->
          <div class="Charging-Details-infos" v-show="chargingDetailstype == 1">
            <div>
              <div class="Charging-Details-workstate">
                <div v-show="ChargingDetailsworkstatedata.state > 0">
                  <span>使用人：</span>
                  <font>{{
                      ChargingDetailsworkstatedata.userName
                  }}</font>
                </div>
                <div v-show="ChargingDetailsworkstatedata.state > 0">
                  <span>开始时间：</span>
                  <font>{{
                       ChargingDetailsworkstatedata.startTime
                  }}</font>
                </div>
                <div v-show="ChargingDetailsworkstatedata.state > 0">
                  <span>充电量：</span>
                  <font>{{
                      (ChargingDetailsworkstatedata.kWh / 1000).toFixed(2)
                  }}度</font>
                </div>
                <div>
                  <span>当前功率：</span>
                  <font>{{ ChargingDetailsworkstatedata.activePower }}W</font>
                </div>
                <div>
                  <span>当前温度：</span>
                  <font>{{ ChargingDetailsworkstatedata.temperature }}℃</font>
                </div>
                <div v-show="ChargingDetailsworkstatedata.state > 0">
                  <span>充电时长：</span>
                  <font>{{
                      calctime(ChargingDetailsworkstatedata.Usagetime)
                  }}</font>
                </div>
              </div>
              <div class="Charging-Details-line" id="workstateLine"></div>
            </div>
            <div class="allcdi-row">
              <div class="allcdi-box">
                <div class="allcdi-title">温度(℃)</div>
                <div class="allcdi-main">
                  <div>
                    <p>最高</p>
                    <span>{{
                        ChargingDetailsworkstatetotldata ?
                          ChargingDetailsworkstatetotldata.maxSt == 255
                            ? "56"
                            : ChargingDetailsworkstatetotldata.maxSt : '-'
                    }}</span>
                  </div>
                  <div>
                    <p>最低</p>
                    <span>{{ ChargingDetailsworkstatetotldata ? ChargingDetailsworkstatetotldata.minSt : '-' }}</span>
                  </div>
                  <div>
                    <p>平均</p>
                    <span>{{ ChargingDetailsworkstatetotldata ? ChargingDetailsworkstatetotldata.avgSt : '-' }}</span>
                  </div>
                </div>
              </div>
              <div class="allcdi-box">
                <div class="allcdi-title">功率(W)</div>
                <div class="allcdi-main">
                  <div>
                    <p>最高</p>
                    <span>{{ ChargingDetailsworkstatetotldata ? ChargingDetailsworkstatetotldata.maxSp : '-' }}</span>
                  </div>
                  <div>
                    <p>最低</p>
                    <span>{{ ChargingDetailsworkstatetotldata ? ChargingDetailsworkstatetotldata.minSp : '-' }}</span>
                  </div>
                  <div>
                    <p>平均</p>
                    <span>{{ ChargingDetailsworkstatetotldata ? ChargingDetailsworkstatetotldata.avgSp : '-' }}</span>
                  </div>
                </div>
              </div>
              <div class="allcdi-box">
                <div class="allcdi-title">电压(V)</div>
                <div class="allcdi-main">
                  <div>
                    <p>最高</p>
                    <span>{{ ChargingDetailsworkstatetotldata ? ChargingDetailsworkstatetotldata.maxSv : '-' }}</span>
                  </div>
                  <div>
                    <p>最低</p>
                    <span>{{ ChargingDetailsworkstatetotldata ? ChargingDetailsworkstatetotldata.minSv : '-' }}</span>
                  </div>
                  <div>
                    <p>平均</p>
                    <span>{{ ChargingDetailsworkstatetotldata ? ChargingDetailsworkstatetotldata.avgSv : '-' }}</span>
                  </div>
                </div>
              </div>
              <div class="allcdi-box">
                <div class="allcdi-title">电流(A)</div>
                <div class="allcdi-main">
                  <div>
                    <p>最高</p>
                    <span>{{
                        ChargingDetailsworkstatetotldata ? (ChargingDetailsworkstatetotldata.maxSi / 1000).toFixed(2) : '-'
                    }}</span>
                  </div>
                  <div>
                    <p>最低</p>
                    <span>{{
                        ChargingDetailsworkstatetotldata ? (ChargingDetailsworkstatetotldata.minSi / 1000).toFixed(2) : '-'
                    }}</span>
                  </div>
                  <div>
                    <p>平均</p>
                    <span>{{
                        ChargingDetailsworkstatetotldata ? (ChargingDetailsworkstatetotldata.avgSi / 1000).toFixed(2) : '-'
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--使用者历史-->
          <div class="Charging-Details-user" v-show="chargingDetailstype == 2" style="margin-top: 20px">
            <div>
              <el-table :data="ChargingUserGendata" max-height="300px" :header-cell-class-name="headerRowStyle" border
                style="width: 1065px"><el-table-column align="center">
                  <template slot="header">
                    <div class="table-header">充电情况概括</div>
                  </template>
                  <el-table-column align="center" prop="type" width="100">
                    <template slot="header" slot-scope="scope">
                      <div class="table-header">{{ daytitle }}</div>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{
                            usertype != 1
                              ? ChargingDetailsHistorytitle(scope.row)
                              : scope.row.type
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="usagecount" width="120">
                    <template slot="header">
                      <span class="table-header">累计充电(次)</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.chargeTimes }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="sumcharge" width="120">
                    <template slot="header">
                      <span class="table-header">合计用电(度)</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.sqv / 1000 }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="sumtime" width="120">
                    <template slot="header">
                      <span class="table-header">使用时长</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{ calctime(scope.row.chargeDuration) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">温度(℃)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2" width="65">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSt }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2" width="65">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSt }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">功率(W)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2" width="65">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSp }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2" width="65">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSp }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2" width="65">
                      <template slot="header">
                        <span class="table-header">最小</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.minSp }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">电压(V)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2" width="65">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSv }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2" width="65">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSv }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2" width="65">
                      <template slot="header">
                        <span class="table-header">最小</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.minSv }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="操作" prop="type" width="80">
                    <template slot-scope="scope">
                      <el-button type="primary" size="small"
                        @click="getBatteryLogByTimeAndUserIdfun(scope.row)">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div style="margin-top: 10px" v-if="ChargingUserGenvidedatashow">
              <el-table :data="ChargingUserGenvidedata" max-height="300px" :header-cell-class-name="headerRowStyle"
                border style="width: 1045px">
                <el-table-column align="center">
                  <template slot="header">
                    <div class="table-header">用户使用情况记录</div>
                  </template>
                  <el-table-column align="center" type="index" width="50">
                  </el-table-column>
                  <el-table-column align="center">
                    <template slot="header">
                      <span class="table-header">充电桩</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{
                            scope.row.probeChannelName != null
                              ? batteryNameCode(scope.row.probeChannelName) + "号"
                              : "-"
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="200">
                    <template slot="header">
                      <span class="table-header">开始时间</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{
                            scope.row.startTime != null
                              ? scope.row.startTime.slice(0, 16)
                              : "-"
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="100">
                    <template slot="header">
                      <span class="table-header">充电时长</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{ calctime(scope.row.time) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center">
                    <template slot="header">
                      <span class="table-header">充电量</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.sqv / 1000 }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">温度(℃)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSt }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSt }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">电压(V)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSv }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSv }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">功率(W)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSp }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSp }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!--充电桩历史-->
          <div class="Charging-Details-history" v-show="chargingDetailstype == 3" style="margin-top: 20px">
            <div>
              <el-table :data="Charginghistorydata" max-height="300px" :header-cell-class-name="headerRowStyle" border
                style="width: 1070px"><el-table-column align="center">
                  <template slot="header">
                    <div class="table-header">充电桩使用概括</div>
                  </template>
                  <el-table-column align="center" prop="type" width="100">
                    <template slot="header" slot-scope="scope">
                      <div class="table-header">{{ daytitle }}</div>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{
                            usertype != 1
                              ? ChargingDetailsHistorytitle(scope.row)
                              : scope.row.type
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="usagecount" width="120">
                    <template slot="header">
                      <span class="table-header">累计服务(次)</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.chargeTimes }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="sumcharge" width="120">
                    <template slot="header">
                      <span class="table-header">合计耗电(度)</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.sqv / 1000 }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="sumtime" width="120">
                    <template slot="header">
                      <span class="table-header">累计时长</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{ calctime(scope.row.chargeDuration) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">温度(℃)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2" width="55">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSt }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2" width="55">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSt }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">功率(W)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2" width="55">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSp }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2" width="55">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSp }}
                        </div>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">最小</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.minSp }}
                        </div>
                      </template>
                    </el-table-column> -->
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">电压(V)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2" width="55">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSv }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2" width="55">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSv }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2" width="55">
                      <template slot="header">
                        <span class="table-header">最小</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.minSv }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">电流(A)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2" width="55">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ (scope.row.avgSi / 1000).toFixed(1) }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2" width="55">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ (scope.row.maxSi / 1000).toFixed(1) }}
                        </div>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">最小</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ (scope.row.minSi / 1000).toFixed(1)}}
                        </div>
                      </template>
                    </el-table-column> -->
                  </el-table-column>
                  <el-table-column align="center" label="操作" prop="type">
                    <template slot-scope="scope">
                      <el-button type="primary" size="small"
                        @click="getBatteryLogByTimeAndUserIdfun(scope.row)">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div style="margin-top: 10px" v-if="Charginghistorydatashow">
              <el-table :data="ChargingUserGenvidedata" max-height="300px" :header-cell-class-name="headerRowStyle"
                border style="width: 1070px">
                <el-table-column align="center">
                  <template slot="header">
                    <div class="table-header">充电桩使用情况记录</div>
                  </template>
                  <el-table-column align="center" type="index" width="50">
                  </el-table-column>
                  <el-table-column align="center" width="150">
                    <template slot="header">
                      <span class="table-header">充电人</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.userName }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="200">
                    <template slot="header">
                      <span class="table-header">开始时间</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{
                            scope.row.startTime != null
                              ? scope.row.startTime.slice(0, 16)
                              : "-"
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="100">
                    <template slot="header">
                      <span class="table-header">充电时长</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{ calctime(scope.row.time) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center">
                    <template slot="header">
                      <span class="table-header">充电量</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.sqv / 1000 }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">温度(℃)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSt }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSt }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">电压(V)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSv }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSv }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">功率(W)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSp }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSp }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="tl-corner"></div>
        <div class="tr-corner"></div>
        <div class="bl-corner"></div>
        <div class="br-corner"></div>
      </div>
    </div>
  </div>
</template>
<script src="./AerialView.js"></script>
<style lang="stylus" src="./AerialView.styl" scoped></style>
<style>
.el-message-box {
  border: solid 0.01rem #3696c2;
  -webkit-box-shadow: 0 0 20px 0px inset rgba(68, 199, 244, 0.3);
  box-shadow: 0 0 20px 0px inset rgba(68, 199, 244, 0.3);
  background-color: #1c2961;
  z-index: 4;
  border-radius: 3px;
  color: #fff;
  padding: 0.05rem 0.15rem 0.15rem;
}

.el-message-box__title {
  color: #fff;
}

.el-message-box__headerbtn .el-message-box__close {
  color: #fff;
  font-size: 22px;
}

.el-message-box__header {
  border-bottom: 1px solid #fff;
}

.el-message-box__content {
  color: #fff;
}
</style>